<%@ page import="com.blog.service.impl.RightServiceImpl"%>
<%@ page import="com.blog.service.RightService"%>
<%@ page import="com.blog.service.CommentService"%>
<%@ page import="com.blog.service.impl.CommentServiceImpl"%>
<%@ page import="com.blog.service.PhotoService"%>
<%@ page import="com.blog.service.impl.PhotoServiceImpl"%>
<%@ page import="com.blog.service.TagService"%>
<%@ page import="com.blog.service.impl.TagServiceImpl"%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<base href="<%=basePath%>}">
<%
    CommentService commentService=new CommentServiceImpl();
    PhotoService photoService=new PhotoServiceImpl();
    TagService tagService=new TagServiceImpl();
    RightService rightService=new RightServiceImpl();

    request.setAttribute("right",rightService.selRight());
    request.setAttribute("ShowComment",commentService.selComment());
    request.setAttribute("ShowTag",tagService.selAllTag());
    request.setAttribute("HeaderPhoto",photoService.selPhoto(1));
    request.setAttribute("showTagCount",tagService.selAllTagCount());
%>
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>关于</title>
<meta name="description">
<meta name="theme-color" content="#ffffff">
<link rel="shortcut icon" href="blog/img/favicon.png">
<link rel="stylesheet" href="blog/css/index.css">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css">
<link rel="stylesheet"
	href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css">
<style type="text/css">
#nav {
	opacity: 1
}

.justified-gallery img {
	opacity: 1
}

/* 背景 */
#page-header {
	background-image: url("https://s1.ax1x.com/2020/06/30/N4deMj.jpg");
	background-attachment: local !important;
}

#page-header.full_page {
	height: 50vh !important;
}
</style>
<script src="blog/js/global_config.js"></script>
<script id="config_change" src="blog//js/global_change.js"></script>
<script src="blog/js/set_theme.js"></script>
<meta name="generator" content="Hexo 5.1.1">
</head>
<body>
	<!-- 引入头部 -->
	<jsp:include page="header.jsp" flush="true" />
	<div id="body-wrap">
		<main class="layout_page" id="content-inner">
		<div class="tag-cloud">
			<div class="tag-cloud__title">
				标签 - <span class="tag-cloud__amount">3</span>
			</div>
			<div class="tag-cloud-tags">
				<c:forEach items="${requestScope.ShowTag}" var="tag">
					<a href="blog/detailTag.jsp?tagName=${tag.name}"
						style="font-size: 22px; color: rgb(175, 4, 41)">${tag.name}</a>
				</c:forEach>
			</div>
			<hr>
			<div id="post-comment">
				<div class="comment_headling" style="text-align: left !important;">
					<i class="fa fa-comments fa-fw" aria-hidden="true"></i><span>
						评论</span>
				</div>
				<div class="vcomment" id="vcomment"></div>
				<script src="https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js"></script>
				<script>var GUEST_INFO = ['nick','mail','link'];
                var guest_info = 'nick,mail,link'.split(',').filter(function(item){
                    return GUEST_INFO.indexOf(item) > -1
                });
                guest_info = guest_info.length == 0 ? GUEST_INFO :guest_info;

                window.valine = new Valine({
                    el:'#vcomment',
                    notify: false,
                    verify: false,
                    appId: '${requestScope.ShowComment.appId}',
                    appKey: '${requestScope.ShowComment.appKey}',
                    placeholder: '${requestScope.ShowComment.placeholder}',
                    avatar: 'monsterid',
                    meta: guest_info,
                    pageSize: '10',
                    lang: 'zh-cn',
                    recordIP: false,
                    serverURLs: ''
                });
                </script>
			</div>
		</div>
		<!-- 	引入侧边栏 --> <jsp:include page="right.jsp" /> </main>
		<!-- 引入页脚 -->
		<jsp:include page="footer.jsp" />

	</div>
	<section id="rightside">
		<div id="rightside-config-hide">
			<button id="darkmode" type="button" title="浅色和深色模式转换">
				<i class="fas fa-adjust"></i>
			</button>
		</div>
		<div id="rightside-config-show">
			<button id="rightside_config" type="button" title="设置">
				<i class="fas fa-cog"></i>
			</button>
			<button id="go-up" type="button" title="回到顶部">
				<i class="fas fa-arrow-up"></i>
			</button>
		</div>
	</section>
	<div>
		<script src="blog/js/jquery.min.js"></script>
		<script
			src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script>
		<script src="blog/js/utils.js"></script>
		<script src="blog/js/main.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/typed.js"></script>
		<script
			src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js"></script>
	</div>

	<script>
    $(function () {


        $("#site_title").html("标签");

		//随机标签颜色
        function randomColor1(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            if(r < 16){
                r = "0"+r.toString(16);
            }else{
                r = r.toString(16);
            }
            if(g < 16){
                g = "0"+g.toString(16);
            }else{
                g = g.toString(16);
            }
            if(b < 16){
                b = "0"+b.toString(16);
            }else{
                b = b.toString(16);
            }
            return "#"+r+g+b;
        }
		//随机标签大小
        $(".tag-cloud-tags a").each(function () {
            $(this).css("font-size",Math.random() * 10 + 27);
            $(this).css("color",randomColor1());
        })
    })
</script>
</body>

</html>